<template>

  <div>羊只体测

    <div class="app-container">

      <div class="search-container">


        <el-form :inline="true" :model="formInline" class="demo-form-inline">

          <el-form-item label="羊只耳号" style="width: 180px">
            <el-input v-model="formInline.earTag" placeholder="请输羊只耳号" />
          </el-form-item>

          <el-form-item label="品种" style="width: 180px">
            <el-select v-model="formInline.variety" placeholder="请选择" clearable>
              <el-option v-for="item in varitys" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="性别" style="width: 180px">
            <el-select v-model="formInline.sheepRescissionSex" placeholder="请选择" clearable>
              <el-option label="公" :value="true" />
              <el-option label="母" :value="false" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit()">查询</el-button>
            <el-button type="danger" @click="onReset">重置</el-button>
            <el-button type="danger" @click="pishan">批量</el-button>
            <el-button type="success" @click="Xin()">新增</el-button>
          </el-form-item>
        </el-form>


        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="earTag" label="耳号" />
          <el-table-column prop="variety" label="品种">
            <template v-slot="scope">
              <el-tag type="primary" v-if="scope.row.variety == 1">杜泊</el-tag>
              <el-tag type="success" v-if="scope.row.variety == 2">
                澳洲白
              </el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 3">
                萨福克
              </el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 4">杜湖</el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 5">
                杜杜湖
              </el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 6">
                萨杜湖
              </el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 7">澳湖</el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 8">湖羊</el-tag>

              <el-tag type="danger" v-if="scope.row.variety == 9">
                澳杜湖
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="sheepRescissionSex" label="性别">
            <template v-slot="scope">
              <el-tag type="primary" v-if="scope.row.sheepRescissionSex == 0">
                母
              </el-tag>
              <el-tag type="success" v-else-if="scope.row.sheepRescissionSex == 1">
                公
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="ridgepoleId" label="测定栋舍">
            <template v-slot="scope">
              <el-tag type="primary" v-if="scope.row.ridgepoleId == 1">
                1栋
              </el-tag>
              <el-tag type="success" v-else-if="scope.row.ridgepoleId == 2">
                2栋
              </el-tag>
              <el-tag type="danger" v-else-if="scope.row.ridgepoleId == 3">
                3栋
              </el-tag>
            </template>

          </el-table-column>

          <el-table-column prop="columnManagementId" label="测定栏位">
            <template v-slot="scope">
              <el-tag type="primary" v-if="scope.row.columnManagementId == 1">
                后备舍1
              </el-tag>
              <el-tag type="success" v-else-if="scope.row.columnManagementId == 2">
                后备舍2
              </el-tag>
              <el-tag type="danger" v-else-if="scope.row.columnManagementId == 3">
                后备舍3
              </el-tag>
            </template>

          </el-table-column>


          <el-table-column prop="measureDate" label="测定日期">
            <template v-slot="scope">
              {{ scope.row.measureDate.substring(0, 10) }}


            </template>
          </el-table-column>
          <el-table-column prop="measureAge" label="测定日龄" />
          <el-table-column prop="height" label="身高(cm)" />
          <el-table-column prop="bodyLength" label="体长(cm)" />
          <el-table-column prop="chest" label="胸围(cm)" />
          <el-table-column prop="tube" label="管围(cm)" />
          <el-table-column prop="oschea" label="阴囊围(cm)" />
          <el-table-column prop="backfat" label="背膘厚度(cm)" />
          <el-table-column prop="eyeMuscleArea" label="眼肌面积(cm)" />
          <el-table-column prop="eyeMuscleWidth" label="眼肌宽度(cm)" />

          <el-table-column fixed="right" label="操作" width="200" align="center">
            <template #default="scope">
              <el-button type="primary" link @click="handleDelete(scope.row.bodyMeasureId)">
                删除
              </el-button>

              <el-button type="primary" link @click="Updae(scope.row)">
                修改
              </el-button>

            </template>
          </el-table-column>
        </el-table>


        <el-dialog v-model="dialogVisible" title="Tips" width="500">

          <span>体尺添加</span>
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-row :gutter="20">

              <el-col :span="12" :offset="0">


                <el-form-item label="测定日期" prop="weighDate">
                  <el-date-picker v-model="form.measureDate" type="date" placeholder="请选择测定日期" />
                </el-form-item>

                <el-form-item label="身高(cm)">
                  <el-input v-model="form.height" placeholder="请选择" />
                </el-form-item>

                <el-form-item label="胸围(cm)">
                  <el-input v-model="form.chest" placeholder="请选择" />
                </el-form-item>

                <el-form-item label="阴囊围(cm)">
                  <el-input v-model="form.oschea" placeholder="请选择" />
                </el-form-item>

                <el-form-item label="腹肌面积(cm)">
                  <el-input v-model="form.eyeMuscleArea" placeholder="请选择" />
                </el-form-item>

              </el-col>

              <el-col :span="12" :offset="0">

                <el-form-item label="羊只耳号" style="width: 225px">
                  <el-select v-model="form.earTag" placeholder="请选择" clearable>
                    <el-option v-for="item in eartags" :key="item.sheepFileId" :label="item.earTag"
                      :value="item.earTag" />
                  </el-select>
                </el-form-item>

                <el-form-item label="体长(cm)">
                  <el-input v-model="form.bodyLength" placeholder="请选择" />
                </el-form-item>

                <el-form-item label="管围(cm)">
                  <el-input v-model="form.tube" placeholder="请选择" />
                </el-form-item>

                <el-form-item label="背膘厚度(cm)">
                  <el-input v-model="form.backfat" placeholder="请选择" />
                </el-form-item>

                <el-form-item label="眼肌宽度(cm)">
                  <el-input v-model="form.eyeMuscleWidth" placeholder="请选择" />
                </el-form-item>

              </el-col>

            </el-row>

            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>




        <el-dialog v-model="updates" title="Tips" width="500">

          <span>体尺修改</span>
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-row :gutter="20">

              <el-col :span="12" :offset="0">


                <el-form-item label="测定日期" prop="weighDate">
                  <el-date-picker v-model="form.measureDate" type="date" placeholder="请选择测定日期" />
                </el-form-item>

                <el-form-item label="身高(cm)">
                  <el-input v-model="form.height" placeholder="请选择" />
                </el-form-item>

                <el-form-item label="胸围(cm)">
                  <el-input v-model="form.chest" placeholder="请选择" />
                </el-form-item>

                <el-form-item label="阴囊围(cm)">
                  <el-input v-model="form.oschea" placeholder="请选择" />
                </el-form-item>

                <el-form-item label="腹肌面积(cm)">
                  <el-input v-model="form.eyeMuscleArea" placeholder="请选择" />
                </el-form-item>

              </el-col>

              <el-col :span="12" :offset="0">

                <el-form-item label="羊只耳号" style="width: 225px">
                  <el-select v-model="form.earTag" placeholder="请选择" clearable>
                    <el-option v-for="item in eartags" :key="item.sheepFileId" :label="item.earTag"
                      :value="item.earTag" />
                  </el-select>
                </el-form-item>

                <el-form-item label="体长(cm)">
                  <el-input v-model="form.bodyLength" placeholder="请选择" />
                </el-form-item>

                <el-form-item label="管围(cm)">
                  <el-input v-model="form.tube" placeholder="请选择" />
                </el-form-item>

                <el-form-item label="背膘厚度(cm)">
                  <el-input v-model="form.backfat" placeholder="请选择" />
                </el-form-item>

                <el-form-item label="眼肌宽度(cm)">
                  <el-input v-model="form.eyeMuscleWidth" placeholder="请选择" />
                </el-form-item>

              </el-col>

            </el-row>

            <el-form-item>
              <el-button type="primary" @click="Upwd(ruleFormRef)">
                保存
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>




      </div>
    </div>


  </div>
  <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
    :page-sizes="[1, 2, 3, 4]" :background="true" layout="total, sizes, prev, pager, next, jumper"
    :total="page.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />





</template>


<script setup lang="ts">

import { ref, onMounted, reactive } from "vue";
import PurchaseAPI from "@/api/Breeding/index";
import BodyMeasure, { getBodyMeasure, AddMeasure } from "../../../api/BodyMeasureModel/index";
import { ElMessageBox, ElMessage, UploadInstance } from "element-plus";
import AddSupplier from "./addSupplier.vue";
import { useRouter } from "vue-router";
import { number } from "echarts";
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()

onMounted(() => {


  onSubmit();
  getvaritysList();
  Eartag();
})


const formInline = reactive<getBodyMeasure>({
  pageIndex: 1,
  pageSize: 15,
  earTag: null,
  variety: null,
  sheepRescissionSex: null
});


const tableData = ref([]);
const handleSizeChange = (val: number) => {
  formInline.pageSize = val;
  onSubmit();
};
const handleCurrentChange = (val: number) => {
  formInline.pageIndex = val;
  onSubmit();
};

//分页条件
const page = reactive({
  totalCount: 0,
  pageCount: 0,
});

//显示列表
const onSubmit = () => {
  console.log(formInline);
  console.log(page);
  BodyMeasure.getBodyMeasureList(formInline)

    .then((res: any): any => {
      tableData.value = res.data.data;
      page.totalCount = res.data.totalCount;
      page.pageCount = res.data.pageCount;
    })
    .catch((err: any) => {
      console.log(err);
    });
};


//品种类型
const varitys = ref([]);
const getvaritysList = () => {
  BodyMeasure.BodyMeasureVarity()
    .then((res: any): any => {
      varitys.value = res.data;
    })
    .catch((err: any) => {
      console.log(err);
    });
};




const handleDelete = (bodyMeasureId: number) => {
  const ids = [bodyMeasureId];
  ElMessageBox.confirm("确认删除吗?", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      BodyMeasure.DeleteBodyMeasure(ids).then((res: any) => {
        if (res.code > 0) {
          ElMessage.success("删除成功");
          onSubmit();
        } else {
          ElMessage.error("删除失败");
          onSubmit();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
const ids = ref([]);

const handleSelectionChange = (val: any) => {
  val.forEach((item) => {
    ids.value.push(item.bodyMeasureId);
  });
  console.log(ids);
};

const pishan = () => {
  ElMessageBox.confirm("确认删除吗?", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      BodyMeasure.DeleteBodyMeasure(ids.value).then((res: any) => {
        if (res.code > 0) {
          ElMessage.success("删除成功");
          onSubmit();
        } else {
          ElMessage.error("删除失败");
          onSubmit();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};



const formEartag = reactive({
  presentState: 1,
  sheepType: 3

})


const eartags = ref([])
const Eartag = () => {
  console.log(formEartag);
  BodyMeasure.MeasureEarTagLisShow(formEartag.presentState,
    formEartag.sheepType,)

    .then((res: any): any => {
      eartags.value = res.data;
      console.log(eartags.value)
    })
    .catch((err: any) => {
      console.log(err);
    });
};


const form = reactive<AddMeasure>({

  bodyMeasureId: "",
  earTag: "",
  measureDate: "2024-08-01",
  height: null,
  bodyLength: null,
  chest: null,
  tube: null,
  oschea: null,
  backfat: null,
  eyeMuscleArea: null,
  eyeMuscleWidth: null,
})

const rules = reactive<FormRules>({
  measureDate: [
    { required: true, message: '测定日期不为空', trigger: 'blur' },
  ],
})


const dialogVisible = ref(false);
const Xin = () => {

  dialogVisible.value = true;

}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {

      BodyMeasure.AddBodyMeasure(form)
        .then((res: any): any => {

          if (res.code > 0) {
            ElMessage.success('添加成功')

          }
          else {
            ElMessage.error('添加失败')
          }



        })

      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}




const Upwd = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {

      BodyMeasure.UpdateBodyMeasure(form)
        .then((res: any): any => {

          if (res.code > 0) {
            ElMessage.success('修改成功')

          }
          else {
            ElMessage.error('修改失败')
          }



        })

      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}


const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}


const updates = ref(false);
const Updae = (data: any) => {
  form.bodyMeasureId = data.bodyMeasureId
  form.earTag = data.earTag
  form.measureDate = data.measureDate
  form.height = data.height
  form.bodyLength = data.bodyLength
  form.chest = data.chest
  form.tube = data.tube
  form.oschea = data.oschea
  form.backfat = data.backfat
  form.eyeMuscleArea = data.eyeMuscleArea
  form.eyeMuscleWidth = data.eyeMuscleWidth
  updates.value = true;

}




</script>
